<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="headerCon">
      <view class="search">
        <view class="flex-box flex-box-v-center searchCon"
              @tap="boxClick">
          <view class="icon">
            <image src="/static/static/image/search.png"></image>
          </view>
          <view class="text flex-item-1 font_s_28 font_c_8e">春装</view>
          <view class="icon">
            <image src="/static/static/image/camera.png"></image>
          </view>
        </view>
      </view>
      <block>
        <view class="navScroll_con">
          <view class="navScroll"
                ref="nav">
            <view>
              <text @tap="navClick(item)"
                    :class="active == item.blockId?'active':''"
                    v-for="(item, index) in articleBlockList"
                    :key="index">{{item.blockName}}</text>
            </view>
          </view>
        </view>
      </block>
      <!-- <y-nav-scroll articleBlockList="{{articleBlockList}}" bind:navClick="navClick"></y-nav-scroll> -->
    </view>
    <scroll-view class="goodsListS bg_f7"
                 scroll-y
                 @scroll="scroll"
                 @scrolltolower="getSearchProductsMore">
      <view class="l_container">
        <view class="l_row">
          <view class="l_col-3"
                v-for="(item, index) in 15"
                :key="index">
            <view class="goodsCon">
              <view class="goodsConImageCon">
                <image class="tagIcon rightTop"
                       mode="widthFix"
                       src="/static/static/image/new.png"></image>
                <image mode="widthFix"
                       src="./../../static/image/296866_00.jpg"></image>
                <!-- <image wx:if="{{item.stock == 0}}" class="sale_out" mode="widthFix" src="./../../../static/image/sale_out.png"></image> -->
              </view>
              <view class="integral flex-box font_s_28">
                <view class="flex-item-1 font_w_900">
                  <text class="integralText money font_c_pink">￥299</text>
                  <text class="integralText money  del font_c_91 font_s_22">￥398</text>
                </view>
              </view>
              <view class="goodsTitle font_s_28 font_c_main van-ellipsis">
                <text>小孩纸</text>
              </view>
              <view class="subheading font_s_22 font_c_91">漂亮的小孩纸，哈哈哈</view>
              <view class="tagCon flex-box">
                <view class="tag font_c_pink font_s_22">可爱</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      active: '1',
      articleBlockList: [
        {
          blockId: 1,
          blockName: '栏目一'
        },
        {
          blockId: 2,
          blockName: '栏目二'
        },
        {
          blockId: 3,
          blockName: '栏目三'
        },
        {
          blockId: 4,
          blockName: '栏目四'
        },
        {
          blockId: 5,
          blockName: '栏目五'
        },
        {
          blockId: 6,
          blockName: '栏目六'
        },
        {
          blockId: 7,
          blockName: '栏目七'
        },
        {
          blockId: 8,
          blockName: '栏目八'
        }
      ]
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    scroll() {},

    getSearchProductsMore() {
      console.log('触底加载')
    },

    //事件处理函数
    navClick: function(item) {
      this.active = item.blockId
      console.log('用户点击的数据', item)
    },

    boxClick() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
      return
    }
  }
}
</script>
<style>
@import './home.css';
</style>